import * as echarts from 'echarts'

export function cubeRenderItem(params, api, barWidth) {
  const { seriesIndex } = params
  const currentSeriesIndices = api.currentSeriesIndices()
  const barLayout = api.barLayout({
    barGap: '30%',
    barCategoryGap: '20%',
    count: currentSeriesIndices.length
  })
  // 基础坐标
  const basicsCoord = api.coord([api.value(0), api.value(seriesIndex + 1)])
  // 顶部基础y轴
  const topBasicsYAxis = basicsCoord[1]
  // 基础x轴 + 偏移
  const basicsXAxis = basicsCoord[0] + (barLayout[seriesIndex]?.offsetCenter ?? 0)
  // 底部基础y轴
  const bottomYAxis = api.coord([api.value(0), 0])[1]

  // 绘制柱状体三个面的图形并注册
  const leftShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape
      // 侧面宽度
      const WIDTH = barWidth
      // 斜角高度
      const OBLIQUE_ANGLE_HEIGHT = barWidth / 2 - 1
      const p1 = [basicsXAxis - WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT] // 左上角坐标
      const p2 = [basicsXAxis - WIDTH, bottomYAxis + OBLIQUE_ANGLE_HEIGHT] // 左下角坐标
      const p3 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT] // 右下角坐标
      const p4 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT] // 右上角坐标
      ctx.moveTo(p1[0], p1[1])
      ctx.lineTo(p2[0], p2[1])
      ctx.lineTo(p3[0], p3[1])
      ctx.lineTo(p4[0], p4[1])
    }
  })
  const rightShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape
      // 侧面宽度
      const WIDTH = barWidth / 2
      // 斜角高度
      const OBLIQUE_ANGLE_HEIGHT = barWidth / 2 - 1
      const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT] // 左上角坐标
      const p2 = [basicsXAxis, bottomYAxis + OBLIQUE_ANGLE_HEIGHT] // 左下角坐标
      const p3 = [basicsXAxis + WIDTH, bottomYAxis] // 右下角坐标
      const p4 = [basicsXAxis + WIDTH, topBasicsYAxis] // 右上角坐标
      ctx.moveTo(p1[0], p1[1])
      ctx.lineTo(p2[0], p2[1])
      ctx.lineTo(p3[0], p3[1])
      ctx.lineTo(p4[0], p4[1])
    }
  })
  const topShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topBasicsYAxis, basicsXAxis } = shape
      // 侧面宽度
      const LEFT_WIDTH = barWidth
      const RIGHT_WIDTH = barWidth / 2
      // 斜角高度
      const OBLIQUE_ANGLE_HEIGHT = barWidth / 2 - 1
      const p1 = [basicsXAxis, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT] // 右下角坐标
      const p2 = [basicsXAxis + RIGHT_WIDTH, topBasicsYAxis] // 右上角坐标
      const p3 = [basicsXAxis + RIGHT_WIDTH - LEFT_WIDTH, topBasicsYAxis] // 左上角坐标
      const p4 = [basicsXAxis - LEFT_WIDTH, topBasicsYAxis + OBLIQUE_ANGLE_HEIGHT] // 左下角坐标
      ctx.moveTo(p1[0], p1[1])
      ctx.lineTo(p2[0], p2[1])
      ctx.lineTo(p3[0], p3[1])
      ctx.lineTo(p4[0], p4[1])
    }
  })
  echarts.graphic.registerShape('leftShape', leftShape)
  echarts.graphic.registerShape('rightShape', rightShape)
  echarts.graphic.registerShape('topShape', topShape)

  let color = api.visual('color')
  let colorLinear = false
  let colorEnd = color

  if (color?.type == 'linear') {
    colorLinear = true
    colorEnd = color.colorStops[1].color
    color = color.colorStops[0].color
  }

  return {
    type: 'group',
    children: [
      {
        type: 'leftShape',
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis
        },
        style: {
          fill: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color
              },
              {
                offset: 1,
                color: colorLinear ? colorEnd : color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 2)
              }
            ],
            global: false
          }
        }
      },
      {
        type: 'rightShape',
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis
        },
        style: {
          fill: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 1.5)
              },
              {
                offset: 1,
                color: colorLinear ? colorEnd : color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 2)
              }
            ],
            global: false
          }
        }
      },
      {
        type: 'topShape',
        shape: {
          topBasicsYAxis,
          basicsXAxis,
          bottomYAxis
        },
        style: {
          fill: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color
              },
              {
                offset: 1,
                color: color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 1.2)
              }
            ],
            global: false
          }
        }
      }
    ]
  }
}

export function cylinderRenderItem(params, api, barWidth) {
  const { seriesIndex } = params
  const currentSeriesIndices = api.currentSeriesIndices()
  const barLayout = api.barLayout({
    barGap: '30%',
    barCategoryGap: '20%',
    count: currentSeriesIndices.length
  })
  const yValue = api.value(seriesIndex + 1)
  // 基础坐标
  const basicsCoord = api.coord([api.value(0), yValue])
  // 顶部基础y轴
  const topBasicsYAxis = basicsCoord[1]
  // 基础x轴 + 偏移
  const basicsXAxis = basicsCoord[0] + (barLayout[seriesIndex]?.offsetCenter ?? 0)
  // 底部基础y轴
  const bottomYAxis = api.coord([api.value(0), 0])[1]

  let color = api.visual('color')
  let colorLinear = false
  let colorEnd = color

  if (color?.type == 'linear') {
    colorLinear = true
    colorEnd = color.colorStops[1].color
    color = color.colorStops[0].color
  }

  return {
    type: 'group',
    children: [
      {
        type: 'circle',
        shape: {
          cx: basicsXAxis,
          cy: bottomYAxis,
          r: barWidth / 2
        },
        scaleY: 0.5,
        originX: basicsXAxis,
        originY: bottomYAxis,
        style: {
          fill: colorLinear ? colorEnd : color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 2)
        }
      },
      {
        type: 'rect',
        shape: {
          x: basicsXAxis - barWidth / 2,
          y: topBasicsYAxis,
          width: barWidth,
          height: api.size([0, yValue])[1]
        },
        style: {
          fill: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 1.5)
              },
              {
                offset: 1,
                color: colorLinear ? colorEnd : color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 2)
              }
            ],
            global: false
          }
        }
      },
      {
        type: 'circle',
        shape: {
          cx: basicsXAxis,
          cy: topBasicsYAxis,
          r: barWidth / 2
        },
        scaleY: 0.5,
        originX: basicsXAxis,
        originY: topBasicsYAxis,
        style: {
          fill: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color.replaceAll(/(\d+)(?=%)/g, (arg, p1) => p1 / 1.5)
              },
              {
                offset: 1,
                color: color
              }
            ],
            global: false
          }
        }
      }
    ]
  }
}
